<template>
  <section class="steps">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 text-center m-b-20">
          <h1>
            <strong>{{t('step')}}</strong>
            {{t('steps')}}
          </h1>
        </div>
      </div>
      <div class="row row-centered">
        <div class="col-md-3 col-sm-6 clearfix text-center col-centered" v-for="icon of icons">
          <div class="feature feature-icon-steps">
            <div class="step-icon">
              <bSkeleton :loading="allLoading" width="270px" height="270px" borderRadius="0px">
                <img :src="icon.url">
              </bSkeleton>
              <aSkeleton :loading="allLoading" active>
                <h2>
                  <span>{{icon.id}}/</span>
                  {{t(icon.title)}}
                </h2>
                <div>{{t(`${icon.title}C`)}}</div>
              </aSkeleton>
            </div>
          </div>
        </div>
      </div>
      <div class="row text-center  m-t-50">
        <div class="text-center col-sm-10 col-sm-offset-1"></div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
  /** lib **/
  import {
    useI18n
  } from 'vue-i18n'
  /** components **/
  import bSkeleton from '../../../../components/bSkeleton.vue'
  /** logic **/
  import useImgLoading from './img-loading' // img-loading
  export default {
    components: {
      bSkeleton
    },
    setup() {
      return {
        ...useImgLoading(),
        ...useI18n({
          inheritLocale: true
        })
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "step":"3个步骤",
  "steps": "充分利用您的数据",
  "collection":"采集",
  "collectionC":"您的数据",
  "processing":"处理",
  "processingC":"实时",
  "publication":"发行",
  "publicationC":"在仪表板上"
  },
  "en": {
  "step":"3 steps",
  "steps": "to take fully advantage of your data",
  "collection":"COLLECTION",
  "collectionC":"of your data",
  "processing":"PROCESSING",
  "processingC":"in real time",
  "publication":"PUBLICATION",
  "publicationC":"in dashboards"
  },
  "ja": {
  "step":"3ステップ",
  "steps": "データを最大限に活用する",
  "collection":"コレクション",
  "collectionC":"あなたのデータの",
  "processing":"処理",
  "processingC":"リアルタイムで",
  "publication":"発表",
  "publicationC":"ダッシュボードで"
  }
  }
</i18n>

<style scoped>
  section {
    padding-top: 80px;
    position: relative;
    overflow: hidden;
    padding-bottom: 80px;
  }

  h2 {
    font-size: 28px;
    line-height: 44px;
  }

  .row-centered {
    text-align: center;
  }

  .col-centered {
    display: inline-block;
    float: none;
    margin-right: -4px;
  }

  .feature {
    overflow: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .feature-icon-steps h2 {
    font-weight: 700;
  }

  .feature-icon-steps h2 span {
    font-weight: 100;
    font-size: 40px;
  }

  .feature-icon-steps>div {
    font-size: 16px;
  }
</style>